<template>
  <div class="alone-outBox f14">
    <div class="alone-topBox mb16">
      <!-- <div class="top_body">
          <h5 class="title">视频提问规范要求</h5>
          通过现场试验、现场提问、查阅记录/报告、核查仪器设备配置、网络视频、网络沟通等综合核查方法，
          评审组认为，江苏省计量院实验室在人员、设备、方法和环境条件等各方面均进行了有效控制，
          质量管理体系能够持续有效运行，保证了检测/校准的工作质量。评审组现场安排了检测试验和校准试验，
          一是法制计量，负责全省量值统一，研究、建立和保存社会公用计量标准，进行量值传递，执行计量器具强制检定任务；
          二是工程计量，为各类企事业单位及公众提供优质计量检定/校准/检测服务，开展能源计量、计量人员技术培训等相关技术服务；
          三是科学计量，进行计量标准研究、计量测试方法研究、计量测试设备研究；制修订计量技术规范、检测标准等。
        </div> -->
      <div class="flex flex-warp flex_bt">
   
        <div class="flex flex-warp" style="align-items:center">
          <div class="mb16">
            <!-- <span>关键字：</span> -->
            <el-select
              v-model="changeKey"
              placeholder="请选择"
              class="width120 mr10"
              @change="changekeyType"
            >
              <el-option
                v-for="item in keyWords"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="searchObj.videoName"
              placeholder="请输入关键字"
              class="width200 mr16"
            />
          </div>
          <div class="mb16 mr16">
            <span>回复状态：</span>
            <el-select
              v-model="searchObj.type"
              placeholder="请选择"
              class="width200"
              clearable
            >
              <el-option
                v-for="item in classification"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="mb20">
            <el-button @click="React">重置</el-button>
            <el-button type="primary" @click="SearchListBt">筛选</el-button>
          </div>
        </div>
        <div>

        </div>
      </div>
    </div>

    <div class="tableBox">
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="DataTable"
        style="width: 100%"
        max-height="620"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
      <el-table-column prop="videoId" label="视频Id" min-width="130" align="left"></el-table-column>
        <el-table-column prop="username" label="昵称" min-width="130" align="left">
        </el-table-column>
        <el-table-column
          prop="askContent"
          label="提问内容"
          min-width="250"
          align="left"
        >
        </el-table-column>

          <el-table-column
            prop="videoName"
            label="视频名称"
            min-width="250"
            align="left"
          >
          </el-table-column>
        <el-table-column
          prop="createDate"
          label="发布时间"
          min-width="160"
          align="left"
        />
        <el-table-column prop="companyName" min-width="350" label="单位名称" align="left" />
        <el-table-column
          prop="replyDate"
          label="回复时间"
          min-width="160"
          align="left"
        >
        <template slot-scope="scope">
           <div>{{ scope.row.replyDate?scope.row.replyDate:'暂未回复' }}</div>
        </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="220" fixed="right">
          <template slot-scope="scope">
            <el-button
            v-if="!scope.row.isDelete&&scope.row.replyContent"
                type="text"
                class="mr10"
                @click="checkreply(scope.row)"
            >查看回复</el-button>
            <el-button
            v-if="!scope.row.isDelete&&scope.row.replyContent==null"
                type="text"
                @click="reply(scope.row)"
            >回复</el-button>
            <el-button
            v-if="!scope.row.isDelete&&scope.row.rejectStatus==0"
                type="text"
                @click="delReplyDia=true;dialogForm.id=scope.row.id" class="mr10"
            >申请删除</el-button>
            <el-button  v-if="!scope.row.isDelete&&scope.row.rejectStatus==2"  class="mr10"   type="text" @click="downFile(scope.row)">投诉删除被驳回</el-button>
            <span v-if="scope.row.isDelete" style="color:red">评论已删除</span>
            <el-popover
            v-if="!scope.row.isDelete&&scope.row.rejectStatus==1"
  placement="bottom"
  width="400"
  trigger="click">
<div>
  <div>驳回原因 <span>{{ scope.row.rejectDate }}</span></div>
  <div>
    {{  scope.row.rejectContent}}
  </div>
</div>
  <el-button type="text" style="color:#FF6332;margin-left: 10px;"  slot="reference">投诉删除被驳回 <i class="el-icon-warning"></i> </el-button>
</el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="alignRight">
        <Pagination
          :total="total"
          :page="searchObj.page"
          :limit="searchObj.limit"
          @pagination="paginations"
        />
      </div>
    </div>
    <!-- 查看回复 -->
    <el-dialog
  title="查看回复"
  :visible.sync="checkreplyDia"
  width="800px">
  <div class="checkreply_top">
    <span class="pr30">用户昵称：{{ checkreplyData.username }}</span>
    <span >提问时间：{{ checkreplyData.createDate }}</span>
  </div>
  <p class="content">{{ checkreplyData.askContent }}</p>
  <div class="checkreply_body">
    <div class="body_top">
      <span><span style="font-weight: bold;">回复</span>  {{ checkreplyData.replyDate }}</span>
      <span>回复账号：{{ checkreplyData.replyNickname }}</span>
    </div>
    <p>{{ checkreplyData.replyContent }}
</p>
  </div>
</el-dialog>
    <!-- 回复 -->
    <el-dialog
  title="回复提问"
  :visible.sync="replyDia"
  width="800px"
>
  <div class="checkreply_top">
    <span class="pr30">用户昵称：{{ replay.username }}</span>
    <span >提问时间：{{ replay.createDate }}</span>
  </div>
  <el-input
  type="textarea"
  placeholder="请您回复内容"
  v-model="textareaReply"
  :autosize="{ minRows: 4, maxRows: 6}"
  maxlength="200"
  show-word-limit
>
</el-input>
<div style="text-align: center;margin-top: 16px;">
  <el-button @click="replyDia=false">取消</el-button>
  <el-button type="primary" @click="sureReply()">确认</el-button>
</div>
</el-dialog>
    <!-- 申请删除 -->
    <el-dialog
  title="投诉删除"
  :visible.sync="delReplyDia"
  width="800px">
  <div class="checkreply_top">
    您提交的投诉会在3个工作日内由运营审核，审核通过后提问将从前台删除
  </div>
   <div class="flex">
    <span class="bold">投诉原因：</span>
    <el-radio-group v-model="dialogForm.rejectType">
    <el-radio :label="1">涉黄涉政</el-radio>
    <el-radio :label="2">与视频无关言论</el-radio>
    <el-radio :label="3">其他</el-radio>
  </el-radio-group>
   </div>
   <div>
    <h4 class="ms_mg">描述</h4>
    <el-input
  type="textarea"
  placeholder="请您回复内容"
  v-model="dialogForm.rejectContent"
  :autosize="{ minRows: 4, maxRows: 6}"
  maxlength="200"
  show-word-limit
>
</el-input>
   </div>
<div style="text-align: center;margin-top: 16px;">
  <el-button @click="delReplyDia=false">取消</el-button>
  <el-button type="primary" @click="sureDel()">确认</el-button>
</div>
</el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import Cookies from 'js-cookie'
import indexapi from '@/api/index.js'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      searchObj: {
        companyName: this.$store.getters.companyName,
        current:1,
        size:10,
        type:'',
        videoId:'',
        videoName:''
      },
      dialogForm:{
        rejectType:'',
        rejectContent:'',
        id:'',
        type:2
      },
      checkreplyData:{},
      radio:'',
      textarea2:'',
      textareaReply:'',
      checkreplyDia:false,
      replyDia:false,
      delReplyDia:false,
      changeKey:0,
      total: 0,
      loading: false,
      classification: [
        { name: '未回复', value: 1 },
        { name: '已回复', value: 2 }
      ],
      keyWords:[
        { name: '视频名称', value: 0 },
        { name: '视频id', value: 1 }
      ],
      DataTable: [],
      replay:{}
    }
  },
  mounted() {
    this.SearchList()
  },
  methods: {
    sureDel(){
      indexapi.video.updateQuestionByVideoId(this.dialogForm).then(res=>{
        this.$message({type:'success',message:'申请成功！'})
        this.delReplyDia=false
        this.SearchList()
      })
    },
    //回复
    reply(val){
     this.replay=val
     this.textareaReply=''
     this.replyDia=true
    },
    sureReply(){
      if(this.textareaReply==''){
        this.$message({type:'error',message:'请输入回复内容'})
        return false
      }
      let form={
        replyContent:this.textareaReply,
        replyNickname:Cookies.get('username'),
        replyUsername:Cookies.get('imShowId'),
        companyUserName:Cookies.get('imShowId'),
        username:this.replay.username,
        videoId:this.replay.videoId,
      }
      indexapi.video.addContentByUsername(form).then(res=>{
        this.$message({type:'success',message:'回复成功！'})
        this.replyDia=false
        this.SearchList()
      })
    },
    checkreply(val){
      let form={
        id:val.id
      }
      indexapi.video.selectAskById(form).then(res=>{
      this.checkreplyData={}
      this.checkreplyData=res.data
      this.checkreplyDia=true
     })
     
    },
    changekeyType(val){
      if(val==1){
        this.searchObj.videoId=this.searchObj.videoName     
        this.searchObj.videoName =''
      }else{
        this.searchObj.videoId=''
      }
    }, 
    // 重置
    React() {
      this.searchObj = {
        companyName: this.$store.state.root.companyName,
        current:1,
        size:10,
        type:'',
        videoId:'',
        videoName:''
      }
      this.changeKey = 0
      this.SearchList()
    },
    // 查询
    SearchListBt() {
      this.searchObj.size = 10
      this.searchObj.current = 1
      this.SearchList()
    },
    SearchList() {
      this.loading = true
      if(this.$route.query.id){
        this.searchObj.videoId=this.$route.query.id
      }
      indexapi.video.getList(this.searchObj).then((res) => {
        this.loading = false
        this.DataTable=res.data
      })
    },
    // 分页
    paginations(val) {
      this.searchObj.limit = val.limit
      this.searchObj.page = val.page
      this.SearchList()
    },

  }
}
</script>
<style lang="scss" scoped>
.top_body{
  padding: 15px 16px;
background: linear-gradient(180deg, #DDEEFF 0%, #F2F8FF 100%);
font-size: 14px;
color: #000000;
line-height: 24px;
margin-bottom: 16px;
.title{
font-size: 14px;
font-weight: 600;
color: #0c7ff2;
line-height: 16px;
margin-bottom: 3px;
}
}
.ms_mg{
font-size: 14px;
font-weight: 600;
// color: #000000;
line-height: 16px;
margin-top: 16px;
margin-bottom: 8px;
}
.topButton {
  position: absolute;
  right: 20px;
  top: 16px;
}
.flex_bt {
  justify-content: space-between;
}
.mr10{
  margin-right: 10px;
}
.icon_right {
  font-weight: 600;
  color: #0c7ff2;
  cursor: pointer;
  font-size: 18px;
}
.width120{
  width: 120px !important;
}
::v-deep .el-dialog__footer {
  padding-top: 0px;
  // border-top: 1px solid #e5eaf0;
}
::v-deep .el-dialog__header {
  background: #f5f8fc;
  text-align: left;
  font-size: 16px;
  color: #202933;
  padding: 11px 16px;
}
::v-deep .el-dialog__body {
  padding: 0px 25px 25px !important;
}
::v-deep .el-dialog__title {
  font-size: 16px;
}
.checkreply_top{
  padding: 9px 0;
  border-bottom: 1px solid #E5EAF0;
font-size: 14px;
color: #000000;
line-height: 24px;
margin-bottom: 16px;
.pr30{
  padding-right: 30px;
}
}
.content{
font-size: 14px;
color: #202933;
line-height: 24px;
margin-bottom: 16px;
}
.checkreply_body{
  padding: 16px;
background: #F0F2F8;
.body_top{
  @include flex(row, center, space-between);
font-size: 14px;
color: #7E8790;
line-height: 24px;
margin-bottom: 8px;

}
p{
font-size: 14px;
color: #202933;
line-height: 24px;
}
}
</style>
